<!DOCTYPE html>
<html lang="en" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>

<body>
<div id="app">

    <page-component>
        <template v-slot:header>
            <h1>Here might be a page title</h1>
        </template>

        <template v-slot:default>
            <p>A paragraph for the main content.</p>
            <p>And another one.</p>
        </template>

        <template v-slot:footer>
            <p>Here's some contact info</p>
        </template>
    </page-component>
    <template id="page">
        <div class="container">
            <header>
                <slot name="header"></slot>
            </header>
            <main>
                <slot></slot>
            </main>
            <footer>
                <slot name="footer"></slot>
            </footer>
        </div>
    </template>
    <current-user>
        <template v-slot:default="slotProps">
            {{slotProps.user.firstName}}
        </template>
    </current-user>
    <!--解构-->
    <current-user>
        <template v-slot="{user}">
            {{user.firstName}}
        </template>
    </current-user>

    <current-user>
        <template v-slot="{user:person}">
            {{person.firstName}}
        </template>
    </current-user>
</div>

<script>
    Vue.component("current-user", {
        template: "<span><slot :user='user'>{{user.lastName}}</slot></span>",
        data: function () {
            return {
                user: {
                    firstName: "张",
                    lastName: "三"
                }

            }
        }
    });

    Vue.component("page-component", {
        template: "#page"
    });
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
    });
</script>
</body>

</html>
